<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if   v-else使用</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 v-if="false">{{message}}</h2>
			<h3 v-if="true">{{message}}</h3>
			<p v-if="score >= 90">优秀</p>
			<p v-else-if="score >= 80">良好</p>
			<p v-else-if="score >= 60">及格</p>
			<p v-else>不及格</p>
			<p>{{result}}</p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:'xie',
					score:20
				},
				/* 上面判断条件过多不建议在标签里面使用 我们可以写一个函数方法 */
				computed:{/* 使用计算属性 */
					result(){
						let showMessage="";
						if(this.score >= 90){
							showMessage="优秀";
							
						} else if (this.score >= 80){
							showMessage="良好";
						} else if (this.score >= 60){
							showMessage="及格";
						} else {
							showMessage="不及格";
						}
						return showMessage;
					}
					
				}
			});
		</script>
	</body>
</html>
